<template>
  <div class="div-pop islayer-container" catchtouchmove="true">
    <div class="islayer-box">
      <h2 class="font-15 font-w height-40 flex flex-center">
        <div>申请结果</div>
      </h2>
      <div class="islayer-content mar-b-20">
        <div class="flex width-per-100">
          <span class="font-14 font-red text-align-c flex-item height-22">{{promptText}}</span>
        </div>
        <div>
          <!-- 微信 -->
          <div class="wx-platform flex flex-between mar-t-16 pad-t-8 pad-b-8 pad-l-10 pad-r-10 border-radius-5">
            <div class="v-align-c">
              <div class="width-20 height-20 flex icon-box flex-center">
                <img v-if="fileSpace" class="width-15 height-15" :src="fileSpace + '/images/anchor-wx-icon.png'" alt="" >
              </div>
              <span class="font-15 font-color-3 mar-l-7">微信</span>
            </div>
            <div>
              <span
                v-if="!platformObj['1'] || (platformObj['1'] && platformObj['1']['applyStatus'] === 2)"
                @click="goToApply('1')"
                class="font-14 f-color">立即开通</span>
              <span v-if="platformObj['1'] && platformObj['1']['applyStatus'] === 0" class="font-12">审核中</span>
              <span v-if="platformObj['1'] && platformObj['1']['applyStatus'] === 1" class="font-12 v-align-c"><van-icon name="passed" />&nbsp;已开通</span>
            </div>
          </div>
          <span v-if="platformObj['1'] && platformObj['1']['applyStatus'] === 2" class="font-11 font-color-9 v-align-c mar-t-7 mar-b-10">
            <van-icon name="warning-o"/>&nbsp;审核未通过(原因：{{platformObj['1']['rejectReason']}})
          </span>          
          <!-- 抖音 -->
          <div class="dy-platform flex flex-between mar-t-12 pad-t-8 pad-b-8 pad-l-10 pad-r-10 border-radius-5">
            <div class="v-align-c ">
              <div class="width-20 height-20 flex icon-box flex-center">
                <img v-if="fileSpace" class="width-15 height-15" :src="fileSpace + '/images/dy-icon.png'" alt="" >
              </div>
              <span class="font-15 font-color-3 mar-l-7">抖音</span>
            </div>
            <div>
              <span
                v-if="!platformObj['2'] || (platformObj['2'] && platformObj['2']['applyStatus'] === 2)"
                @click="goToApply('2')"
                class="font-14 f-color">立即开通</span>
              <span v-if="platformObj['2'] && platformObj['2']['applyStatus'] === 0" class="font-12">审核中</span>
              <span v-if="platformObj['2'] && platformObj['2']['applyStatus'] === 1" class="font-12 v-align-c"><van-icon name="passed" />&nbsp;已开通</span>
            </div>
          </div>
          <span v-if="platformObj['2'] && platformObj['2']['applyStatus'] === 2" class="font-11 font-color-9 v-align-c mar-t-7 mar-b-10">
            <van-icon name="warning-o"/>&nbsp;审核未通过(原因：{{platformObj['2']['rejectReason']}})
          </span>
          <!-- 快手 -->
          <div class="ks-platform flex flex-between mar-t-12 pad-t-8 pad-b-8 pad-l-10 pad-r-10 border-radius-5">
            <div class="v-align-c">
              <div class="width-20 height-20 flex icon-box flex-center">
                <img v-if="fileSpace" class="width-15 height-15" :src="fileSpace + '/images/ks-icon.png'" alt="" >
              </div>
              <span class="font-15 font-color-3 mar-l-7">快手</span>
            </div>
            <div>
              <span
                v-if="!platformObj['3'] || (platformObj['3'] && platformObj['3']['applyStatus'] === 2)"
                @click="goToApply('3')"
                class="font-14 f-color">立即开通</span>
              <span v-if="platformObj['3'] && platformObj['3']['applyStatus'] === 0" class="font-12">审核中</span>
              <span v-if="platformObj['3'] && platformObj['3']['applyStatus'] === 1" class="font-12 v-align-c"><van-icon name="passed" />&nbsp;已开通</span>
            </div>
          </div>
          <span v-if="platformObj['3'] && platformObj['3']['applyStatus'] === 2" class="font-11 font-color-9 v-align-c mar-t-7 mar-b-10">
            <van-icon name="warning-o"/>&nbsp;审核未通过(原因：{{platformObj['3']['rejectReason']}})
          </span>
        </div>
      </div>
      <div class="bottom-bar pad-t-12 pad-b-12">
        <img class="width-per-100 height-21" v-if="fileSpace" :src="fileSpace + '/images/explain-bottom.png'"/>
        <div class="sure-btn font-16 font-w flex flex-center" @click="closeLayer">
          <div>朕知道了</div>
        </div>
      </div>
    </div>
    <div class="islayer-bg" @click="closeLayer"></div>
  </div>
</template>

<script>
import {getAnchorApplyList} from '@/api/personal'
export default {
  components: { },
  data() {
    return {
      promptText: '',
      platformObj: {},
      statusNum: null
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.getAnchorApplyList()
  },
  mounted() {
    setTimeout(() => {
      this.getAnchorApplyList()
    }, 100)
  },
  methods: {
    closeLayer() {
      this.$parent.anchorBoolean = false
    },
    getAnchorApplyList() {
      if (!this.getCustomerId) return
      this.statusNum = null
      let data = {
        memberId: this.getCustomerId
      }
      getAnchorApplyList(data).then(response => {
        if (response.isError) return
        let resData = response.data
        if (resData.length) {
          resData.forEach(item => {
            this.$set(this.platformObj, item['relationPlatform'], {})
            this.$set(this.platformObj[item['relationPlatform']], 'applyStatus', item['applyStatus'])
            this.$set(this.platformObj[item['relationPlatform']], 'rejectReason', item['rejectReason'])
            if (item.applyStatus === 1) {
              this.statusNum = 1
            }
          })
        }
        this.promptText = this.statusNum ? '你已获得主播身份，开通其他带货渠道' : '您未获得主播身份'
      }).catch(() => {
      })
    },
    goToApply(type) {
      this.$pt.navigateTo({ url: '/pages/personal/apply-anchor/main?type=' + type + '&inPage=1' })
    }
  }
}
</script>

<style lang="less" scoped>
.dy-platform {
  background: #f5f5f5;
  .icon-box {
    border-radius: 4px;
    background: #000;
  }
}
.wx-platform {
  background: #f5f5f5;
  .icon-box {
    border-radius: 4px;
    background: #09BB07;
  }
}
.ks-platform {
  background: #f5f5f5;
  .icon-box{
    border-radius: 4px;
    background: #FA9401;
  }
}
.f-color {
  color: #764CFF;
}
</style>
